<template>
  <div>
    登录页面
    <button type="primary" @getuserinfo="getUserInfo" open-type="getUserInfo">微信登录</button>
  </div>
</template>

<script>
  
  import request from '@/utils/request';
  import login from '@/utils/login';
  import getUserInfo from '@/utils/getuserinfo';
  import getSetting from '@/utils/getsetting';

  export default {

    methods: {
      getUserInfo (res) {
        // 用户信息
        const {
          encryptedData,
          iv,
          rawData,
          signature
        } = res.target;

        // 调用登录接口
        this.login(encryptedData, iv, rawData, signature);
      },

      async login (encryptedData, iv, rawData, signature) {
        // 获取登录凭证
        const {code} = await login();

        // 请求登录接口
        const {message} = await request({
          url: '/api/public/v1/users/wxlogin',
          method: 'post',
          data: {
            encryptedData,
            iv,
            rawData,
            signature,
            code
          }
        });

        // console.log(message);
        // 记录 token 
        mpvue.setStorageSync('token', message.token);
        // 返回上一步
        mpvue.navigateBack({delta: 1});
      }
    },

    async onLoad () {

      // 检测授权
      const {authSetting} = await getSetting();

      if(authSetting['scope.userInfo']) {
        // 用户信息
        const {
          encryptedData,
          iv,
          rawData,
          signature
        } = await getUserInfo();

        // 调用登录接口
        this.login(encryptedData, iv, rawData, signature);
      }

      // mpvue.login({
      //   success (res) {
      //     console.log(res)
      //   }
      // });

      // 必须是用户已授权的前提下使用

      // 要想获得用户的授权只能通过 button 实现
      // 通过按钮也可以获得用户的信息，因为当用户点击了
      // 授权按钮时，会触发一个事件 getuserinfo
      // 通过事件可以获得用户的信息

      // mpvue.getUserInfo({
      //   success (res) {
      //     console.log(res);
      //   }
      // })

      // mpvue.getSetting({
      //   success (res) {
      //     console.log(res)
      //   }
      // })
    }
  }
</script>